<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
    <link rel="stylesheet" href="assets/css/base.css">
	<link rel="stylesheet" href="assets/css/index.css">
	<link rel="stylesheet" href="/js/nprogress/nprogress.css">
</head>
<body>
    <section class="todoapp">
        <header class="header">
            <h1>todos</h1>
            <input type="text" class="new-todo" placeholder="What needs to be done?" autofocus id="task">
        </header>
        <!-- This section should be hidden by default and shown when there are todos -->
        <section class="main">
            <input class="toggle-all" type="checkbox">
            <ul class="todo-list" id="todo-list"></ul>
        </section>
        <!-- This footer should hidden by default and shown when there are todos -->
        <footer class="footer">
            <!-- This should be `0 items left` by default -->
            <span class="todo-count"><strong id="count">0</strong> item left</span>
            <!-- Remove this if you don't implement routing -->
            <ul class="filters">
                <li>
                    <a id="all" href="javascript:;">All</a>
                </li>
                <li>
                    <a id="active" href="javascript:;">Active</a>
                </li>
                <li>
                    <a id="completed" href="javascript:;">Completed</a>
                </li>
            </ul>
            <!-- Hidden if no completed items are left ↓ -->
            <button id="clear-completed" class="clear-completed">Clear completed</button>
        </footer>
    </section>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/template-web.js"></script>
    <script src="/js/nprogress/nprogress.js"></script>
	<!-- 任务列表模板 -->
    <script type="text/html" id="taskTpl">
        {{each tasks}}
        <li class="{{$value.completed?'completed':''}}">
            <div class="view">
                <input type="checkbox" class="toggle" {{$value.completed?"checked":""}}>
                <label>{{$value.title}}</label>
                <button class="destroy" data-id="{{$value._id}}"></button>
            </div>
            <input class="edit">
        </li>
        {{/each}}
    </script>
    <script>
		// 用于存放任务列表的数组
        var taskAry=[];
		// 选择任务列表容器
        var taskBox=$("#todo-list");
        // 添加任务的文本框
        var taskInp=$("#task");
		// 用于存储未完成任务数量的strong标签
        var strong=$("#count");

        // 获取标签
        var all=$("#all");
        var active=$("#active");
        var completed=$("#completed");
        var clear_completed=$("#clear-completed");

		// 向服务器端发送请求 获取已经存在的任务
        $.ajax({
            url:"/todo/task",
            type:"get",
            success:function(response){
                // 将已存在的任务存储在taskAry变量中
                taskAry=response
                // console.log(response);
                // 字符串拼接
                render();
                // 计算未完成任务数量
                calcCount();
            }
        })
        // 获取文本框并且添加键盘抬起事件
        taskInp.on("keyup",function(event){
            if(event.keyCode==13){
                // console.log("sadfasf");
                // 判断用户是否在文本框中输入了任务名称
                var taskName=$(this).val();
                // 如果用户没有在文本框中输入内容
                if(taskName.trim().length==0){
                    alert("请输入任务名称");
                    // 阻止代码向下执行
                    return;
                }
                $.ajax({
                    type:"post",
                    url:"/todo/addTask",
                    contentType:"application/json",
                    data:JSON.stringify({title:taskName}),
                    success:function(response){
                        taskAry.push(response);
                        render();
                        taskInp.val("");
                        // 计算未完成任务数量
                        calcCount();
                    }
                })
            }   
        })
        function render(){
            // 字符串拼接
            var html=template("taskTpl",{tasks:taskAry});
            // 将拼接好的字符串显示在ul标签中
            taskBox.html(html);
        }
		// 当用户点击删除按钮时触发ul标签身上的点击事件
        taskBox.on("click",".destroy",function(){
			// 要删除的任务的id
            var id=$(this).attr("data-id");
			// 向服务器端发送请求删除 任务
            $.ajax({
                url:"/todo/deleteTask",
                type:"get",
                data:{
                    _id:id
                },
                success:function(response){
                    // console.log(response);
					// 从任务数组中找到已经删除掉的任务的索引
                    var index=taskAry.findIndex(item=>item._id==id);
                    taskAry.splice(index,1);
                    render();
                    // 计算未完成任务数量
                    calcCount();
                }
            })
        })
		// 当用户改变任务名称前面的复选框状态时触发
        taskBox.on("change",".toggle",function(){
            // 代表复选框是否选中 true 选中 false 未选中的
            const status=$(this).is(":checked");
            // console.log(status);
			// 当前点击任务的id
            const id=$(this).siblings("button").attr("data-id")
            // console.log(id);
            // 向服务器端发送请求 更改任务状态
            $.ajax({
                type:"post",
                url:"/todo/modifyTask",
                data:JSON.stringify({_id:id,completed:status}),
                contentType:"application/json",
                success:function(response){
                    // console.log(response);
                    var task=taskAry.find(item=>item._id==id)
                    task.completed=response.completed;
                    render();
                    // 计算未完成任务数量
                    calcCount();
                }
            })
        })
        // 当双击事件名称的时候触发
        taskBox.on("dblclick","label",function(){
            // console.log("asfa");
			// 让任务处于编辑状态
            $(this).parent().parent().addClass("editing");
            // 将任务名称显示在文本框中     让文本框获取焦点
            $(this).parent().siblings("input").val($(this).text()).focus();
        });
		// 当文本框离开焦点的时候
        taskBox.on("blur",".edit",function(){
            // 最新的任务名称
            var newTaskName=$(this).val();
            // 编辑任务的id
            var id=$(this).siblings().find("button").attr("data-id");
            // var id=$(this).siblings("div").children("button").attr("data-id");
            // console.log(id);
            // 向服务器端发送请求 修改任务名称
            $.ajax({
                url:"/todo/modifyTask",
                type:"post",
                data:JSON.stringify({_id:id,title:newTaskName}),
                contentType:"application/json",
                success:function(response){
                    // console.log(response);
                    var task=taskAry.find(item=>item._id==id)
                    task.title=response.title;
                    render();
                    // 计算未完成任务数量
                    calcCount();
                }
            })
        })
        // 用于计算未完成任务的数量
        function calcCount(){
			// 存储结果的变量
            var count=0;
			// 将未完成的任务过滤到一个新的数组中
            var newAry=taskAry.filter(item=>item.completed==false);
            // 将新数组的长度赋值给count
            count=newAry.length;
            // 将未完成的任务数量显示在页面中
            strong.text(count);
        }
        // 所有任务
        all.on("click",function(){
            // console.log("SAFASF");
            // $(this).addClass("selected").parent().siblings().find("a").removeClass("selected");
            $.ajax({
                url:"/todo/task",
                type:"get",
                success:function(response){
                    // 将已存在的任务存储在taskAry变量中
                    taskAry=response
                    // console.log(response);
                    // 字符串拼接
                    render();
                    // 计算未完成任务数量
                    calcCount();
                }
            })
        })
        // 没完成的任务
        active.on("click",function(){
            // console.log("SAFASF");
            // $(this).addClass("selected").parent().siblings().find("a").removeClass("selected");
            $.ajax({
                url:"/todo/active",
                type:"get",
                success:function(response){
                    // console.log(response);
                    taskAry=response;
                    render();
                }
            })
        })
        // 全部完成
        completed.on("click",function(){
            // console.log("SAFASF");
            // $(this).addClass("selected").parent().siblings().find("a").removeClass("selected");
            $.ajax({
                url:"/todo/allComplete",
                type:"get",
                success:function(response){
                    // console.log(response);
                    taskAry=response;
                    render();
                    calcCount();
                }
            })
        })
        // 清除完成任务
        clear_completed.on("click",function(){
            // console.log("SAFASF");
            // $(this).addClass("selected").parent().siblings().find("a").removeClass("selected");
            $.ajax({
                url:"/todo/clearTask",
                type:"get",
                success:function(response){
                    // console.log(response);
                    taskAry=response;
                    render();
                    calcCount();
                }
            })
        })
    </script>
</body>
</html>